<!--
 * @Author: your name
 * @Date: 2021-04-08 18:43:47
 * @LastEditTime: 2021-05-15 18:14:24
 * @LastEditors: Please set LastEditors
 * @Description: 饼状图2
 * @FilePath: /medicine-web/src/components/Charts/PieChart2.vue
-->
<template>
  <div class="pie-two-container">
    <div :id="elementId" style="height: 360px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'pieChart2',
  data () {
    return {}
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var myChart = echarts.init(document.getElementById(this.elementId))
      myChart.setOption({
        title: {
          text: this.chartTitle,
          textStyle: {
            color: '#555555',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          icon: 'bar',
          data: this.getLegend(),
          right: '10%',
          top: '20%',
          orient: 'vertical',
          formatter: function(label){
      　　　　return label.length > 4 ? label.substr(0,4) + '...' : label
        　},
          textStyle: {
            color: '#555555',
            width: 20
          }
        },
        series: {
          name: '联合疗法',
          type: 'pie',
          radius: ['40%', '75%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '32',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.chartData,
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
          }
        }
      })
    },
    getLegend() {
      return this.chartData.map(item => item.name)
    }
  },
  watch: {
    chartData (val, old) {
      this.initChart()
    }
  },
  props: {
    elementId: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss" scoped>
.pie-two-container {
  box-shadow: 5px 5px 6px #ccc;
  border-radius: 5px;
}
</style>